/* 公共样式类 */

/* 颜色定义 */
$primary-color: #ff6b35;
$secondary-color: #ff4757;
$background-color: #f5f5f5;
$white-color: #ffffff;
$dark-text: #333;
$gray-text: #666;
$light-gray: #f8f8f8;

/* 间距定义 */
$spacing-xs: 10rpx;
$spacing-sm: 20rpx;
$spacing-md: 30rpx;
$spacing-lg: 40rpx;

/* 圆角定义 */
$border-radius-sm: 10rpx;
$border-radius-md: 15rpx;
$border-radius-lg: 20rpx;
$border-radius-circle: 50%;

/* 阴影效果 */
@mixin box-shadow($x: 0, $y: 4rpx, $blur: 12rpx, $color: rgba(0, 0, 0, 0.1)) {
  box-shadow: $x $y $blur $color;
}

/* Flex布局辅助类 */
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

/* 文本样式 */
.text-center {
  text-align: center;
}

.text-bold {
  font-weight: bold;
}

.text-primary {
  color: $primary-color;
}

.text-secondary {
  color: $secondary-color;
}

.text-dark {
  color: $dark-text;
}

.text-gray {
  color: $gray-text;
}

/* 背景样式 */
.bg-white {
  background-color: $white-color;
}

.bg-light {
  background-color: $light-gray;
}

/* 间距工具类 */
.m-xs {
  margin: $spacing-xs;
}

.m-sm {
  margin: $spacing-sm;
}

.m-md {
  margin: $spacing-md;
}

.m-lg {
  margin: $spacing-lg;
}

.p-xs {
  padding: $spacing-xs;
}

.p-sm {
  padding: $spacing-sm;
}

.p-md {
  padding: $spacing-md;
}

.p-lg {
  padding: $spacing-lg;
}

/* 圆角工具类 */
.rounded-sm {
  border-radius: $border-radius-sm;
}

.rounded-md {
  border-radius: $border-radius-md;
}

.rounded-lg {
  border-radius: $border-radius-lg;
}

.rounded-circle {
  border-radius: $border-radius-circle;
}